import { uni_type_staticNode } from './cla_uni_type_staticNode';
import { uni_type_eventBind } from './cla_uni_type_eventBind';
import { spacename_uni_type } from '../DataDefine/sourceData';
import type { uni_type_props } from './cla_uni_type_props';
import { listenEvent_mana } from '@global/index';
import { sleep } from '@/global/Func/sleep';
import {
  get_cur_uni_info_ind_in_active_type_info,
  push_cur_type_info_tp_active_type_info,
  remove_cur_type_info_in_active_type_info,
} from '../../active_type/Func/ref_active_type_info';
import {
  active_search_type_info,
  disactive_search_type_info,
} from '../../search_type/Func/ref_selectable_type_info';
import { css_active_item_Prop_active } from '@/components/global_comps/Css';
import { get_full_id_active_uni_type } from '../../active_type/Func/get_full_id_active_uni_type';
import { normalizeContainer } from '@/components/global_comps/Func/normalizeContainer';
import { get_full_id_search_uni_type } from '../../search_type/Func/get_full_id_search_uni_type';

const uni_type_dataManaTag = 'uni_type_dataMana';

export class uni_type_dataMana extends uni_type_staticNode {
  get [Symbol.toStringTag]() {
    return uni_type_dataManaTag;
  }

  constructor(props: uni_type_props) {
    super(props);
  }

  /**
   * 事件 绑定 this
   */
  eventBind = new uni_type_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = new listenEvent_mana(spacename_uni_type);

  /**
   * 移除 或者 添加 类型
   */
  async remove_or_use_cur_type() {
    let ind_cur_info = get_cur_uni_info_ind_in_active_type_info(this.cur_info);

    /**
     * 当存在时 删除
     *
     * 不存在时 添加
     */
    if (ind_cur_info > -1) {
      await this.#remove_attri_cur_type();
      await sleep(500);
      this.#remove_cur_type(this.cur_info);
    } else {
      await this.#active_attri_cur_type();
      this.#use_cur_type(this.cur_info);
    }

    // console.log(toRaw(ref_active_type_info.value));
  }

  /**
   * 启用 类型
   */
  async #active_attri_cur_type() {
    // 当前 触发元素 的 动画 -- 选中
    this.dom_border.setAttribute(css_active_item_Prop_active, 'true');

    // await sleep(200);

    // let the_other_dom = get_other_dom_search_or_active(
    //   this.cur_info.cur_uni_type_id!,
    //   this.cur_info.id
    // );
    // the_other_dom.setAttribute(css_active_item_Prop_active, 'true');
  }

  /**
   * 禁用 类型
   */
  async #remove_attri_cur_type() {
    // 当前 触发元素 的 动画 -- 取消
    this.dom_border.removeAttribute(css_active_item_Prop_active);

    await sleep(200);
    let the_other_dom = get_other_dom_search_or_active(
      this.cur_info.cur_uni_type_id!,
      this.cur_info.id
    );

    the_other_dom.removeAttribute(css_active_item_Prop_active);
  }

  /**
   * 添加 类型
   */
  async #use_cur_type(info: uni_type_props) {
    active_search_type_info(info);

    // 创建对象的深拷贝，避免修改原对象
    const new_info: uni_type_props = {
      ...info,
      active: true,
    };
    push_cur_type_info_tp_active_type_info(new_info);
  }

  /**
   * 删除 类型
   */
  async #remove_cur_type(info: uni_type_props) {
    remove_cur_type_info_in_active_type_info(info);

    disactive_search_type_info(info);
  }
}

/**
 * 获取 与 当前 id 相同的 另一个 元素
 */
function get_other_dom_search_or_active(cur_id: string, id: string) {
  let ret: HTMLElement;

  let active_id = get_full_id_active_uni_type(id);

  let search_id = get_full_id_search_uni_type(id);

  let the_other_dom_id = cur_id == active_id ? search_id : active_id;

  ret = normalizeContainer(the_other_dom_id)!;

  return ret;
}
